<template>
	<view class="paymeny-bill-detail-layout">
		<!-- 账单信息 -->
		<view class="paymeny-bill-detail-info">
			<view class="paymeny-bill-detail-info-item">
				<text>汇总编号</text>
				<text>{{jsonData.id}}</text>
			</view>
			<view class="paymeny-bill-detail-info-item">
				<text>创建时间</text>
				<text>{{dayjs(jsonData.tradeDate).format('YYYY-MM-DD')}}</text>
			</view>
			<view class="paymeny-bill-detail-info-item">
				<text>汇总金额</text>
				<text>¥{{jsonData.amount}}</text>
			</view>
			<view class="paymeny-bill-detail-info-item">
				<text>收益类型</text>
				<text>{{getTypeName()}}</text>
			</view>
			<view class="paymeny-bill-detail-info-item">
				<text>品牌名称</text>
				<text>{{jsonData.brandName}}</text>
			</view>
			<view class="paymeny-bill-detail-info-item">
				<text>产品名称</text>
				<text>{{jsonData.productName}}</text>
			</view>
			<view class="paymeny-bill-detail-info-item">
				<text>产品政策</text>
				<text>{{jsonData.productPolicy}}</text>
			</view>
		</view>
		<!-- 账单明细 -->
		<view class="paymeny-bill-detail-info" style="margin-top: 30rpx;">
			<view class="paymeny-bill-detail-info-title">明细</view>
			<view class="table">
				<view class="table-row">
					<text class="table-cell">明细ID</text>
					<text class="table-cell">收益金额</text>
				</view>
				<view class="table-row" v-for="item in dataList" :key="item.id">
					<text class="table-cell">{{item.id}}</text>
					<text class="table-cell">{{item.amount}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import dayjs from 'dayjs'
	import { useConfigStore } from '@/common/stores'
	import { getIncomeStatisticsDetailList } from '@/common/api/api.js'

	const configStore = useConfigStore()
	const dataList = ref([])
	const props = defineProps(['data'])
	const jsonData = JSON.parse(decodeURIComponent(props.data))
	console.log(jsonData)
	// 根据类型code获取类型名称
	const getTypeName = () => {
		const res = configStore.incomeTypes.filter(obj => jsonData.revenueType == obj.code)
		if (res.length > 0) {
			return res[0].name
		}
		return ''
	}
	const getDetailList = async () => {
		let params = {}
		params.incomeType = jsonData.revenueType
		params.policyId = jsonData.policyId
		params.produceId = jsonData.produceId
		params.profitType = jsonData.profitType
		const date = dayjs(jsonData.tradeDate).format('YYYY-MM-DD')
		if (!uni.$uv.test.empty(date)) {
			params.txnStartTime = date
			params.txnEndTime = date
		}
		const res = await getIncomeStatisticsDetailList(params)
		dataList.value = res.result
	}
	onLoad(() => {
		getDetailList()
	})
</script>

<style lang="scss" scoped>
	.paymeny-bill-detail-layout {
		padding: 30rpx;

		.paymeny-bill-detail-info {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 16rpx;

			.paymeny-bill-detail-info-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;

				&:nth-child(n+2) {
					margin-top: 20rpx;
				}
			}

			.paymeny-bill-detail-info-title {
				font-size: 26rpx;
				font-weight: 500;
				color: $xh-color-6;

			}

			.table {
				display: table;
				width: 100%;
				/* 单元格边框合并 */
				border-collapse: collapse;
				margin-top: 20rpx;

				.table-row {
					display: table-row;

					.table-cell {
						display: table-cell;
						border: 1px solid #eee;
						/* 单元格边框 */
						padding: 20rpx 10rpx;
						/* 单元格内边距 */
						text-align: center;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
	}
</style>